"use client";

import { useMemo } from "react";
import type { EventRecord } from "@agent-society/types";
import { Panel } from "@agent-society/ui";

export interface TelemetryDeckProps {
  events: EventRecord[];
}

const statusColors: Record<string, string> = {
  task: "text-sky-300",
  comment: "text-emerald-300",
  alert: "text-rose-300"
};

export function TelemetryDeck({ events }: TelemetryDeckProps) {
  const telemetry = useMemo(() => events.slice(0, 6), [events]);
  return (
    <Panel title="Telemetry" description="Latest runtime and governance signals">
      <ul className="space-y-2 text-sm">
        {telemetry.map(entry => (
          <li key={entry.id} className="flex items-start justify-between gap-3 rounded-lg bg-slate-900/40 px-3 py-2">
            <div>
              <p className="font-medium text-slate-100">{entry.content}</p>
              <p className="text-xs text-slate-500">
                {entry.actor} → {entry.owner}
              </p>
            </div>
            <span className={`text-xs uppercase tracking-wide ${statusColors[entry.type] ?? "text-slate-400"}`}>
              {entry.type}
            </span>
          </li>
        ))}
        {telemetry.length === 0 && <li className="text-xs text-slate-500">No telemetry entries</li>}
      </ul>
    </Panel>
  );
}
